<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/layer/css/layui.css}" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}" ></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/layer/layui.js}"></script>
</head>
<body>
    <div class="container-fluid">
        <form class="layui-form" id="roleFrm">
            <div class="row " style="padding-top: 10px;">
                <div class="col-sm-6">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">结账单号</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control"   th:value="${bill.getBillnum()}" name="billnumber" id="billnumber">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">结账餐台</label>
                        <div class="col-sm-7">
                            <input type="text" readonly class="form-control" id="" th:value="${bill.getDiningnumber()}" name="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <table id="tableBill" class="layui-table">
                    <thead>
                    <tr>
                        <th hidden>billid</th>
                        <th>menuname</th>
                        <th>menuprice</th>
                        <th>menu_p</th>
                        <th>conut</th>
                        <th>zongjin</th>
                        <th>menuType</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="emp:${bill.list}">
                        <td th:text="${emp.getMenuname()}"></td>
                        <td th:text="${emp.getMenuprice()}"></td>
                        <td th:text="${emp.getMenuP()}"></td>
                        <td th:text="${emp.getConut()}"></td>
                        <td th:text="${emp.getMenuname()}"></td>
                        <td th:text="${emp.getMenuType()}">
<!--                       -->
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="row my-2">
                <div class="col-sm-6">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">会员类型</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" readonly  th:value="${bill.getMembergrade()}" id="membergrade" name="membergrade">
                            <input class="hidden" name="memberid" id="memberid" th:value="${bill.getMemberid()}">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">总金额</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" readonly  th:value="${bill.getZonge()}" id="zonge" name="zonge">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row my-2">
                <div class="col-sm-6">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">打折比例</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="ratio" name="ratio" value="0.95" min="0" max="1">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">实际费用</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="actual" name="actual" oninput = "value=value.replace(/[^\d]/g,'')">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row my-2" id="memberstyle">
                <div class="col-sm-6">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">收取金额</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="collect" name="collect" oninput = "value=value.replace(/[^\d]/g,'')">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">找零</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="small" name="small">
                        </div>
                        <div class="col-sm-6">
                            <label class="layui-form-label">存入</label>
                            <input type="checkbox" name="switch" id="save"  lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭" >
                            <input type="text" class="hidden" id="switchv" value="0" name="switchv">
                        </div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">余额</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="balance" th:value="${bill.getBalance()}" name="balance">
                        </div>
                        <div class="col-sm-6">
                            <label class="layui-form-label">使用</label>
                            <input type="checkbox" name="" id="jifen_sw"  lay-skin="switch" lay-filter="switchBalan" lay-text="使用|关闭" >
                            <input type="text" class="hidden" id="switchb" value="0" name="switchb">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row my-2" style="text-align: center;">
                <button class="layui-btn" lay-submit="" lay-filter="updateRole">提交</button>
                <button class="layui-btn layui-btn-warm">重置</button>
            </div>
        </form>
    </div>
<script>
    var layer,switchvalue,switchb;
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var zonge1;
        //如果父页面有layer就是用父页面的，没有就导入
         layer = parent.layer === undefined ? layui.layer : parent.layer;

        $(function () {
           var zonge = $("#zonge").val();
           // zonge * ratio = actual
            var ratio = $("#ratio").val();//  collect - actual = small
            //var small = $("#small").val();
            zonge1 = Number(zonge) * Number(ratio);
            $("#actual").val(zonge1);  //比例未修改时，实际费用


        });
        $("#collect").blur(function () {
            var collect = $("#collect").val();
            var actual=  $("#actual").val();
            var small = Number(collect) - Number(actual);
            $("#small").val(small);

        });
        $("#ratio").blur(function () {
            var zonge = $("#zonge").val();
            var ratio = $("#ratio").val();
            zonge1 = Number(zonge) * Number(ratio);
            $("#actual").val(zonge1);//比例修改，实际费用
        })
        form.on('switch(switchTest)',function (data) {
            if (this.checked){
                switchvalue = 1;
                $("#switchv").val(switchvalue);
              //  console.log(switchvalue);
            }
            else{
                switchvalue = 0;
                $("#switchv").val(switchvalue);
                //console.log(switchvalue);
            }
        })
        /*form.on('switch(switchntegral)',function (data) {
            var memberid = $("#memberid").val();
            if (this.checked){
                var ji = $("#jifen").val();
               var num = Number($("#actual").val()) - Number(ji);
               if (num > 0){//积分小于消费
                   switchi = 1;
                   $("#actual").val(num);
                   $("#jifen_sw").attr("disabled",true);

                    //将会员积分修改为  0
                $("#switchi").val(switchi);
               }
               else{//积分大于消费
                   switchi = 2;
                   $("#actual").val(0);
                   var ji = $("#jifen").val(Math.abs(num));
                   $("#jifen_sw").attr("disabled",true);
                   //修改积分  //将会员积分修改为
                   $("#switchi").val(switchi);
               }
            }
            else{
                switchi = 0;
            }
        })*/
        form.on('switch(switchBalan)',function (data) {
            if (this.checked){

                var ji = $("#balance").val();
                var num = Number($("#actual").val()) - Number(ji);
                if (num > 0){//消费大于余额    余额===0
                    switchb = 1;
                    $("#actual").val(num);
                    //$("#balance").val(0);
                $("#switchb").val(switchb);
                }
                else{
                    switchb = 2;
                    $("#collect").val($("#actual").val());
                    $("#actual").val(0);
                    $("#balance").val(Math.abs(num));

                    //修改余额
                    $("#switchb").val(switchb);
                }
            }
            else{
                switchb = 0;
            }
        })
        //监听提交，使用layui form submit事件
        form.on('submit(updateRole)', function () {
            //form获取数据
            var data = $('#roleFrm').serialize();
            $.post(
                '/billtable/abbfootbill',
                data,
                function (data) {
                    console.log(data);
                    if (data.code == 0) {
                        //弹出成功的提示
                        layer.msg(data.msg, {icon: 1, time: 2000});
                        //重载表格
                        parent.tabalBill.reload();
                        //关闭窗口
                        var index = layer.getFrameIndex(window.name);
                        layer.close(index);
                    } else {
                        //弹出失败的提示
                        layer.msg(data.msg, {icon: 2, time: 3000});
                    }
                }
            );
            return false;
        });
    });
    function updatajifen(memberID,jifenValue) {

    }
/*    function cry() {
       var save = $("#switchv").val();
        console.log(save);
    }*/
</script>
</body>
</html>